<template>
  <view class="mdl-wrap">
    <view class="mdl-nav-bar">
      <view class="mdl-nav-bar__back" @tap="handleBack">
        <uni-icons type="back" size="30"></uni-icons>
      </view>
      <text>释迦摩尼</text>
    </view>
    <scroll-view ref="scrollViewChat" :scroll-y="true" :show-scrollbar="false" :scroll-into-view="scrollIntoId"
      class="mdl-chat__box">
      <view v-for="(item, index) in msgList" :key="index">
        <view class="mdl-chat__item" :class="[item.type === 'receive' ? 'mdl-chat__left' : 'mdl-chat__right']">
          <mdl-avatar width="84" :src="item.type === 'receive'
            ? '/static/images/ask-buddha-hall/buddha-avatar.png'
            : '/static/images/ask-buddha-hall/user-avatar.png'
            ">
          </mdl-avatar>
          <view class="mdl-chat__content">
            <text>{{ item.content }}</text>
          </view>
        </view>
      </view>
      <!-- 底部锚点元素 -->
      <view :id="bottomAnchorId" />
    </scroll-view>
    <view class="mdl-chat-bar__fixed">
      <view class="mdl-chat-bar__wrap">
        <view class="mdl-chat-bar__input-box">
          <textarea v-model="content" placeholder="请输入内容" :maxlength="-1" :auto-height="true" :fixed="true"
            :disable-default-paddin="true" class="mdl-chat-bar__input"></textarea>
        </view>
        <view class="mdl-chat-bar__icon-box mdl-chat-bar__send-box" @tap="sendMsg">
          <image src="/static/images/ask-buddha-hall/send.png"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import MdlAvatar from '@/components/mdl-avatar/mdl-avatar.vue'

const scrollViewChat = ref()
const content = ref('')
const scrollIntoId = ref('')
const bottomAnchorId = ref('scrollBottom')

const msgList = ref([
  {
    type: 'receive',
    content: '你可以提出你的问题',
  },
  {
    type: 'send',
    content: '你是释迦摩尼？',
  },
  {
    type: 'receive',
    content:
      '我不是释迦摩尼本人，而是通过智慧与哲理的方式，帮助解答你的疑问。倘若你心中有疑惑，不妨直言我听，我将尽力为你提供指引。记住，解答常在内心寻得。',
  },
  {
    type: 'send',
    content: '你可以做什么事呢？',
  },
  {
    type: 'receive',
    content:
      '我不求做事，仅在于引导。在生命的长河中，每个人都是自己的舟，航行的方向需由自己掌握。我所能做的，是在你迷茫时给予一盏心灯，为你点亮通往内心宁静的小径。若你有问题，愿我能成为你探索答案的同伴，引发你的思考，启迪你的内在智慧。',
  },
])

const sendMsg = () => {
  if (!content.value) return
  msgList.value.push({
    type: 'send',
    content: content.value,
  })
  content.value = ''
  scrollToBottom()
}

const scrollToBottom = () => {
  // 先重置防止重复点击无效
  scrollIntoId.value = ''
  // 使用nextTick等待DOM更新后设置锚点ID触发滚动
  nextTick(() => {
    scrollIntoId.value = bottomAnchorId.value
  })
}

const handleBack = () => {
  // 触发自定义事件，通知父组件关闭聊天
  emit('close')
}

// 声明组件要触发的自定义事件
const emit = defineEmits(['close'])
</script>

<style scoped lang="scss">
.mdl-wrap {
  box-sizing: border-box;
  background-image: url('https://scripture.oss-cn-shenzhen.aliyuncs.com/20250627/dialogueCard_1751016729048.png');
  background-position: center;
  background-size: cover;
  height: 56vh;
  display: flex;
  flex-direction: column;
}

.mdl-nav-bar {
  padding: 16rpx 0;
  background-color: transparent;
  color: #000;
  font-weight: 700;
  font-size: 32rpx;
  text-align: center;
  box-shadow: 0 16rpx 16rpx rgba(255, 255, 255, 0.1);
  z-index: 1000;
  position: relative;
}

.mdl-nav-bar__back {
  position: absolute;
  left: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdl-nav-bar__back image {
  width: 32rpx;
  height: 32rpx;
}

.mdl-chat__box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mdl-chat__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rpx;
  width: max-content;
  max-width: 85%;
  padding: 16rpx 16rpx;
  border-radius: 8rpx;

  &.mdl-chat__left {
    flex-direction: row;
  }

  &.mdl-chat__right {
    margin-left: auto;
    flex-direction: row-reverse;
  }
}

.mdl-chat__content {
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  font-size: 28rpx;
  text-align: justify;
  display: flex;
  align-items: center;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
}

.mdl-chat__left .mdl-chat__content {
  background-color: #ffffff;
  color: #7b7b7b;
}

.mdl-chat__left .mdl-chat__content::after {
  content: '';
  position: absolute;
  left: -12rpx;
  top: 28rpx;
  width: 32rpx;
  height: 32rpx;
  background-color: #fff;
  clip-path: polygon(50% 0, 0 50%, 50% 100%);
}

.mdl-chat__right .mdl-chat__content {
  background: linear-gradient(#7298fd, #2f5ad0);
  color: #f5f5f7;
}

.mdl-chat__right .mdl-chat__content::after {
  content: '';
  position: absolute;
  right: -12rpx;
  top: 28rpx;
  width: 32rpx;
  height: 32rpx;
  background: linear-gradient(#7298fd, #2f5ad0);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%);
}

.mdl-chat-bar__fixed {
  z-index: 1000;
  display: flex;
  box-shadow: 0 -16rpx 16rpx rgba(255, 255, 255, 0.1);
}

.mdl-chat-bar__wrap {
  /* #ifndef APP-NVUE */
  width: 100%;
  display: flex;
  /* #endif */
  padding: 16rpx 24rpx;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.mdl-chat-bar__input-box {
  /* #ifndef APP-NVUE */
  width: 100%;
  display: flex;
  /* #endif */
  flex-direction: row;
  flex: 1;
  position: relative;
  border-radius: 40rpx;
}

.mdl-chat-bar__input {
  /* 统一样式 */
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 40rpx;
  flex: 1;

  /* 视觉优化 */
  border-radius: 50rpx;
  font-size: 24rpx;
  line-height: 1.25;
  background-color: #fff;
}

.mdl-chat-bar__icon-box {
  height: 72rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  flex-shrink: 0;
  /* #endif */
  align-items: center;
  justify-content: center;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

.mdl-chat-bar__icon-box image {
  width: 68rpx;
  height: 68rpx;
  flex-shrink: 0;
}

.mdl-chat-bar__icon-box:active {
  opacity: 0.5;
}

.mdl-chat-bar__send-box {
  padding-left: 24rpx;
  transition: all 0.3s ease;
}

.mdl-chat-bar__send-box:active {
  transform: scale(0.95);
}
</style>
